<template>
	<a-card :bordered="false">
		<a-row :gutter="24">
			<a-col :span="6">
				<a-form-item label="关键词">
					<a-input v-model:value="searchFormState.keyword" placeholder="请输入关键词" allowClear/>
				</a-form-item>
			</a-col>
			<a-col :span="6">
				<a-form-item label="违规等级" name="level">
					<a-select
						v-model:value="searchFormState.level"
						placeholder="违规等级"
						:options="VIOLATION_LEVEL"
						allowClear
					/>
				</a-form-item>
			</a-col>
			<a-col :span="6">
				<a-form-item label="违规类型" name="type">
					<a-select
						v-model:value="searchFormState.type"
						placeholder="违规类型"
						:options="VIOLATION_TYPE"
						allowClear
					/>
				</a-form-item>
			</a-col>
			<a-col :span="6">
				<a-form-item label="质检对象" name="type">
					<a-select
						v-model:value="searchFormState.scope"
						placeholder="请选择质检对象"
						:options="KEYWORD_SCOPE"
						allowClear
					/>
				</a-form-item>
			</a-col>
			<a-col :span="4">
				<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
				<a-button class="ml-3" @click="reset">重置</a-button>
			</a-col>

		</a-row>
	</a-card>
	<a-card :bordered="false" class="mt-2">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
		>
			<template #operator>
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()">
						<template #icon>
							<plus-outlined/>
						</template>
						新增
					</a-button>
					<a-button type="primary" @click="uploadFormRef.openUpload()">
						<template #icon>
							<plus-outlined/>
						</template>
						导入
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)">编辑</a>
						<a-divider type="vertical"/>
						<a-popconfirm title="确定要删除此关键词吗？" @confirm="del(record.id)">
							<a-button type="link" danger size="small">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="tableRef.refresh(true)"/>
	<UploadForm ref="uploadFormRef" @successful="tableRef.refresh(true)"/>
</template>

<script setup name="keyword">
import Form from '@/views/qc/keyword/form.vue'
import keyWordApi from "@/api/qc/keyword/keyWordApi";
import UploadForm from "@/views/qc/keyword/uploadForm.vue";
import tool from "@/utils/tool";

const searchFormState = ref({
	current: 1,
	size: 10
})
const tableRef = ref()
const formRef = ref()
const uploadFormRef = ref()
const VIOLATION_TYPE = tool.dictList('VIOLATION_TYPE')
const VIOLATION_LEVEL = tool.dictList('VIOLATION_LEVEL')
const KEYWORD_SCOPE = tool.dictList('KEYWORD_SCOPE')

const columns = [
	{
		title: '关键词',
		dataIndex: 'keyword'
	},
	{
		title: '等级',
		dataIndex: 'levelName'
	}, {
		title: '违规类型',
		dataIndex: 'typeName'
	}, {
		title: '质检对象',
		dataIndex: 'scopeName'
	},
	{
		title: '创建人',
		dataIndex: 'createUserName'
	},
	{
		title: '创建时间',
		dataIndex: 'createTime'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		scopedSlots: {customRender: 'action'}
	}
]
const loadData = (parameter) => {
	searchFormState.value.current = parameter.current
	searchFormState.value.size = parameter.size
	return keyWordApi.pageList(searchFormState.value).then((res) => {
		return res
	})
}
// 查询
const del = (id) => {
	keyWordApi.delKeyword(id).then(() => {
		tableRef.value.refresh(true)
	})
}
const reset = () => {
	searchFormState.value.keyword = undefined;
	searchFormState.value.level = undefined;
	searchFormState.value.type = undefined;
}
</script>
